<template>
  <!--勘察单位新增弹层start -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
    append-to-body
  >
    <el-row :gutter="10">
      <el-col :span="5">
        <ul class="org-options">
          <li v-for="item in orgOptions" :key="item.typeNum" :class="currentTypeNum === item.typeNum ? 'active' : ''" @click="handleChange(item.typeNum)">{{ item.typeName }}</li>
        </ul>
        <!--<el-select v-model="orgName" style="width:100%" placeholder="请选择单位类型" @change="handleChange">
          <el-option
            v-for="item in orgOptions"
            :key="item.typeNum"
            :label="item.typeName"
            :value="item.typeNum"
          />
        </el-select>-->
      </el-col>
      <el-col :span="19">
        <el-form v-if="dialogVisible" ref="form" inline :model="filters" label-width="80px" class="dialog-form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位名称" prop="companyId">
                <el-input v-model="filters.companyId" clearable size="small" placeholder="请输入单位名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="button-wrap">
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          class="table-list"
          max-height="310"
          style="width: 100%;"
          stripe
          :row-style="rowClass"
          size="mini"
          @selection-change="handleSelectionChange"
          @row-click="rowChecked"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="企业名称" min-width="150" align="center" />
          <el-table-column prop="creditCodePic" :show-overflow-tooltip="true" label="信用代码" width="180" align="center" />
        </el-table>
        <pagination
          :total="total"
          :page.sync="filters.pageNum"
          :limit.sync="filters.pageSize"
          :page-sizes="[8,15,20,50,100]"
          :page-count="filters.pageCount"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>

<script>
import { listOrgType, listOrgTypeList } from '@/api/projectManage/ProjectAllocation/testCommission'
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  components: {
    DialogFooter
  },
  data() {
    return {
      currentTypeNum: '', // 当前选中类型
      orgName: '',
      orgOptions: [],
      // 选择的单位
      multipleSelection: [],
      echoIds: [], // 回显用的
      // 筛选勘察单位
      filters: {
        pageNum: 1,
        pageSize: 8,
        pageCount: 5,
        name: ''
      },
      // 勘察单位列表
      tableData: [],
      selectRow: [],
      total: 0,
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false // 确定按钮
      // 表单验证规则
    }
  },
  watch: {
    currentTypeNum: {
      handler(val) {
        if (val) {
          this.getListOrgTypeList()
        }
      }
    }
  },
  methods: {
    // 切换类型
    handleChange(typeNum) {
      this.currentTypeNum = typeNum
    },
    // 获取单位
    getListOrgTypeList() {
      listOrgTypeList({ sysEnterpriseType: this.currentTypeNum }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.$nextTick(() => {
          this.rowMultipleChecked()
        })
      })
    },
    // 多选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      // 单选
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
      // 高亮
      this.selectRow = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, sysEnterpriseType, companyId) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.getList()
      this.$nextTick(() => {
        this.currentTypeNum = sysEnterpriseType
        this.echoIds = [...this.echoIds, companyId]
      })
    },
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.emptyAddForm()
      this.handleQuery()
    },
    // 获取单位类型
    getList() {
      listOrgType().then(res => {
        const { getDataTable: { rows, total }, enterpriseType } = res.data
        this.orgOptions = enterpriseType.data
        if (!this.currentTypeNum) this.currentTypeNum = this.orgOptions[0].typeNum
        this.tableData = rows
        this.total = total
      })
    },
    /**
     * 用于数据回显
     * echoIds 用于单个回显
     */
    rowMultipleChecked() {
      if (this.echoIds != null) {
        this.tableData.forEach((item, i) => {
          this.echoIds.forEach((multItem, j) => {
            if (this.tableData[i].id === this.echoIds[j]) {
              this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true)// 这步操作是让  页面显示选中的数据
            }
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 提交按钮
    submitForm() {
      if (this.multipleSelection.length) {
        this.$emit('setCompany', this.multipleSelection[0])
        this.cancel()
      } else {
        this.msgWarning('请选择试验单位')
      }
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.currentTypeNum = ''
      this.multipleSelection = []
    }
    /* 新增弹层 end*/
  }
}
</script>

<style scoped lang="scss">
  .org-options{
    list-style: none;
    margin: 0;
    padding:0;
    li{
      line-height: 36px;
      border-bottom: 1px solid #eee;
      padding:0 15px;
      cursor: pointer;
      &.active{
        position: relative;
        &:before{
          display: inline-block;
          position: absolute;
          content: '';
          width: 4px;
          height: 20px;
          top:50%;
          margin-top: -10px;
          left:0;
          background: #409EFF;
        }
      }
    }
  }
</style>
